<template>
	<view class="form form-b">
		<view class="form-group">
			<view class="form-item" v-for="(item, index) in baseData" :key='index' :class="{'form-item-ver': item.type == 'images'}" v-show="!item.isHide">
				<view class="form-item-header">{{item.label}}：</view>
				
				<view class="form-item-body" v-if="item.type == 'select'">
					<picker :value="item.index" :range="item.options" :range-key="item.field == 'district' ? 'name' : 'dict_label' " @change="bindPickerChange($event, item.field)">
						<view class="select">
							<view class="select-selected">{{ item.value | getDictLabel(item.options, item.field == 'district' ? 'district' : 'dict_value', item.field == 'district' ? 'name' : 'dict_label') || '请选择' }}</view>
							<view class="select-btn">
								<uni-icons class="icon" type="arrowdown" font-family="iconfont" size="15"
									color="#a9a9a9">
								</uni-icons>
							</view>
						</view>
					</picker>
				</view>
				
				<view class="form-item-body" v-else-if="item.type == 'cals'">
					
						<view class="cals">
							<view class="cals-group">
								<view class="cals-item">
									<uni-datetime-picker v-model="item.value[0]" type="date">
										<view class="cals-item-left">
											<text class="cals-item-left-label">{{ item.value[0] || '开始时间' }}</text>
										</view>
										<view class="cals-item-right">
											<image class="icon" mode="aspectFit" src="@/static/icon/icon-cal.png">
											</image>
										</view>
									</uni-datetime-picker>
								</view>
								<view class="cals-sign"></view>
									<view class="cals-item">
										<uni-datetime-picker v-model="item.value[1]" type="date">
											<view class="cals-item-left">
												<text class="cals-item-left-label">{{ item.value[1] || '结束时间' }}</text>
											</view>
											<view class="cals-item-right">
												<image class="icon" mode="aspectFit" src="@/static/icon/icon-cal.png">
												</image>
											</view>
										</uni-datetime-picker>
									</view>
							</view> 
						</view>
					
				</view>
				
				<view class="form-item-body" v-else-if="item.type == 'images'">
					<view class="list list-photo">
						<view class="list-group">
							<view class="list-item" v-for="(option, index) in item.options" :key="index">
								<view class="card card-a" @tap="bindPreviewImage(item.field, index)">
									<view class="card-header">
									</view>
									<view class="delete" @tap.stop.prevent="bindDelPic(item.field,index)">
										<image class="icon" mode="aspectFit"
											src="@/static/icon/delete-icon.png">
										</image>
									</view>
									<view class="card-body">
										<image class="pic" mode="aspectFit" :src="option"></image>
									</view>
								</view>
							</view>
							<view class="list-item" v-show="item.options.length < 4">
								<view class="card card-a card-add" @tap="bindChooseImage(item.field)">
									<view class="card-body">
										<uni-icons class="icon" type="plusempty" font-family="iconfont"
											size="42" color="#a9a9a9">
										</uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="form-item-body" v-else>
					<input class="form-control" type="text" v-model="item.value" placeholder="请输入"/>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { queryNearbyMedia, getMediaDetailByMap, getDicts,uploadPic } from '@/api/configure.js';
import { deepClone, getToken, toLogin, getLocation, moveToLocation, mergeUrls, cleanData, chooseImage, previewImage} from '@/util/util.js';
import configUrl from '@/util/url.js';
	
export default {
	props: {
		value:{
			type:  Object,
			default: () => {
				return {}
			}
		}
	},
	data() {
		return {
			baseData: [{
				type: 'input',
				field: 'connectName',
				label: '联系人',
				value: ''
			},{
				type: 'select',
				field: 'owner',
				label: '管理单位',
				value: '',
				index: '',
				options: []
			}, {
				type: 'cals',
				field: 'contract',
				label: '合同期限',
				value: [],
				beginDate: '',
				endDate: ''
			}, {
				type: 'input',
				field: 'buyer',
				label: '产权单位',
				value: ''
			},{
				type: 'select',
				field: 'isLegal',
				label: '是否合法',
				value: '',
				index: '',
				options: []
			},{
				type: 'select',
				field: 'isCheckPlan',
				label: '是否审定规划',
				value: '',
				index: '',
				options: [{dict_label: '是', dict_value: 1}, {dict_label: '否', dict_value: 0}]
			}, {
				type: 'input',
				field: 'checkPlan',
				label: '审定规划内容',
				value: '',
				isHide: true
			}, {
				type: 'input',
				field: 'buyStandard',
				label: '出让标准（元/平/年）',
				value: ''
			}, {
				type: 'cals',
				field: 'safetyCheck',
				label: '安全检测时间',
				value: [],
				beginDate: '',
				endDate: ''
			},{
				type: 'input',
				field: 'applySetUnit',
				label: '申请设置单位',
				value: ''
			},{
				type: 'input',
				field: 'setConnectName',
				label: '设置单位联系人',
				value: ''
			},{
				type: 'input',
				field: 'setConnectPhone',
				label: '设置单位联系电话',
				value: ''
			},{
				type: 'images',
				field: 'workPaperUrl',
				label: '施工图纸',
				value: '',
				index: null,
				options: [],
				urls: [],
			}]
		}
	},
	methods: {
		async getAllDicts(){
			let ds = [
				getDicts({'type': 'selectIsLegal'}), //是否合法
				getDicts({'type': 'owner'})
			];
			
			let dits = await Promise.all(ds);
			
			this.baseData.forEach(item => {
				if (item.field == 'isLegal') {
					item.options = dits[0].data.slice(0);
				} else if(item.field == 'owner') {
					item.options = dits[1].data.slice(0);
				} else {
					
				}
			})
		},
		bindPickerChange(e, field){
			let index = e.detail.value ;
			let select = this.baseData.find(item => item.field == field);
			
			select.index = index;
			select.value = select.options[index]['dict_value'];
			
			if(select.field == 'isCheckPlan'){
				let targetField = this.baseData.find(item => item.field == 'checkPlan');
				
				targetField.isHide = (select.value == 0);
			}
		},
		async bindChooseImage(field) {
			let {tempFilePaths} = await chooseImage();
			
			let data = {
				tempFilePath: tempFilePaths[0],
				name: 'avatarfile'
			}
			 
			let imgUrl = await uploadPic(data);
			
			if (imgUrl) {
				let images = this.baseData.find( item => item.field == field);
				images.urls.push(imgUrl);
				
				let url = `${configUrl.CASEIMAGE_URL}${imgUrl}`;
				
				images.options.push(url);
			}
		},
		async bindDelPic(field, index) {
			let pic = this.baseData.find( item => item.field == field);
			
			pic.options.splice(index, 1);
			pic.urls.splice(index, 1);
		},
		bindPreviewImage(field, index) {
			let pic = this.baseData.find( item => item.field == field);
			
			let data = {
				current: index,
				urls: pic.options
			}
			
			previewImage(data);
		},
		bindDateChange(e, field, type) {
			let cal = this.baseData.find(item => item.field == field);
			
			let date = e.target.value
			
			if(type == 'begin'){
				cal.beginDate = date;
			} else if(type == 'end') {
				cal.endDate = date;
			} else {}
		},
		sendParams() {
			let data = {};
			
			this.baseData.forEach(item => {
				if (item.type == 'cals') {
					if (item.field == 'contract') {
						data['contractBegin'] = item.value[0] || '';
						data['contractEnd'] = item.value[1] || '';
					} else {
						data['safetyCheckBegin'] = item.value[0] || '';
						data['safetyCheckEnd'] = item.value[1] || ''
					}
				} else if (item.type == 'images') {
					data[item.field] = item.urls.join(',');
				} else {
					if(item.field == 'checkPlan'){
						let isCheckPlan = this.baseData.find(item => item.field == 'isCheckPlan');
						
						data[item.field] = (isCheckPlan.value == 1) ? item.value : '';
					} else if(item.field == 'owner') {
						let owner = item.options.find(option => option.dict_value == item.value);
						
						data[item.field] = owner ? owner['dict_label'] : '';
					}else {
						data[item.field] = item.value;
					}
				}
			});
			
			return data;
		},
		setVal() {
			if(Object.keys(this.value).length == 0) {
				return;
			}
			
			this.baseData.forEach( item => {
				if (item.field == 'workPaperUrl') {
					if (this.value['workPaperUrl']) {
						let urls = [];
						if( this.value['workPaperUrl'].indexOf(',') == -1 ) {
							urls = [this.value['workPaperUrl']];
						} else {
							urls = this.value['workPaperUrl'].split(',');
						}
						
						item.options = urls.map(url => `${configUrl.CASEIMAGE_URL}${url}`);
						
						item.urls = urls;
					}
				} else if (item.type == 'cals') {
					if (item.field == 'contract') {
						item.value[0] = this.value['contractBegin'] || '';
						item.value[1] = this.value['contractEnd'] || '';
					} else {
						item.value[0] = this.value['safetyCheckBegin'] || '';
						item.value[1] = this.value['safetyCheckEnd'] || '';
					}
				} else {
					if (item.field == 'isCheckPlan'){
						let checkPlan = this.baseData.find(item => item.field == 'checkPlan');
						checkPlan.isHide = (this.value[item.field] == 0);
						
					}
					
					if(item.field == 'owner'){
						 let owner = item.options.find( option => option.dict_label == this.value[item.field]);
					
						item.value = owner ? owner['dict_value'] : '';
					} else {
						item.value = this.value[item.field];
					}
					
					
				}
			})
			
		},
		async init(){
			await this.getAllDicts();
			this.setVal();
		}
	},
	created() {
		this.init();
	},
	mounted() {},
	watch: {
		value: {
			handler(val, oldVal) {
				this.setVal();
			},
			deep: true
		}
	}
}
	
</script>

<style lang="scss" scoped>
	.form {
		.form-group {
			.form-item {
				margin-bottom: 23rpx;
				padding: 0rpx 60rpx;
				display: flex;
	
				.form-item-header {
					height: 46rpx;
					padding: 6rpx 0rpx;
					font-size: 28rpx;
					line-height: 34rpx;
					text-align: justify;
					box-sizing: border-box;
				}
	
				.form-item-body {
					.cals{
						.cals-group{
							display: flex;
							justify-content: space-between;
							.cals-item{
								border: 1rpx solid #d7d7d7;
								border-radius: 4rpx;
								background-color: #ffffff;
								position: relative;
								top: 0rpx;
								left: 0rpx;
								flex-grow: 1;
								.cals-item-left{
									padding: 8rpx 6rpx;
									padding-right: 46rpx;
									font-size: 24rpx;
									line-height: 30rpx;
									height: 46rpx;
									box-sizing: border-box;
								}
								.cals-item-right{
									width: 46rpx;
									height: 46rpx;
									position: absolute;
									top: 0rpx;
									right: 0rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									.icon{
										width: 24rpx;
										height: 24rpx;
									}
								}
							}
							.cals-sign{
								margin:23rpx 5rpx;
								width: 20rpx;
								height: 1rpx;
								background-color: #c6c6c8;
							}
						}
						
					}
					
					.form-control {
						padding: 6rpx 6rpx;
						border: 1rpx solid #d7d7d7;
						border-radius: 4rpx;
						font-size: 24rpx;
						line-height: 30rpx;
						background-color: #ffffff;
					}
	
					.select {
						border: 1rpx solid #d7d7d7;
						border-radius: 4rpx;
						background-color: #ffffff;
						position: relative;
						top: 0rpx;
						left: 0rpx;
	
						.select-selected {
							padding: 8rpx 6rpx;
							padding-right: 46rpx;
							font-size: 24rpx;
							line-height: 30rpx;
							height: 46rpx;
							box-sizing: border-box;
						}
	
						.select-btn {
							width: 46rpx;
							height: 46rpx;
							position: absolute;
							top: 0rpx;
							right: 0rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
					
					.addr{
						position: relative;
						top: 0rpx;
						left: 0rpx;
						.addr-input{
							padding-right: 46rpx;
						}
						.addr-btn{
							width: 46rpx;
							height: 46rpx;
							position: absolute;
							top: 0rpx;
							right: 0rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							.icon{
								width: 61.8%;
								height: 61.8%;
							}
						}
					}
					
					.area {
						display: flex;
						.area-item {}
						.area-sign {
							padding: 10rpx 8rpx 8rpx 8rpx;
							font-size: 24rpx;
							line-height: 30rpx;
							height: 46rpx;
							box-sizing: border-box;
						}
					}
				}
	
				&.form-item-ver {
					flex-direction: column;
	
					.form-item-body {
						width: 100%;
					}
				}
			}
		}
	}
	
	.form-b {
		.form-item-header {}
		.form-item-body {
			flex-grow: 1;
		}
	}
	
	.list {
		&.list-photo {
			.list-group {
				display: flex;
				.list-item {
					width: 25%;
					display: flex;
					justify-content: center;
				}
			}
		}
	}
	
	.card {
		&.card-a{
			width: 123rpx;
			height: 116rpx;
			position: relative;
			top: 0rpx;
			left: 0rpx;
			.card-header {
				width: 100%;
				height: 31rpx;
				position: absolute;
				top: 0rpx;
				left: 0rpx;
				background-color: #000000;
				opacity: 0.3;
				z-index: 2;
			}
			
			.delete {
				width: 31rpx;
				height: 31rpx;
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				z-index: 3;
				display: flex;
				justify-content: center;
				align-items: center;
			
				.icon {
					width: 20rpx;
					height: 20rpx;
				}
			}
			.card-body {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #ffffff;
				border: 1rpx solid #d9d9d9;
				.pic{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
